<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Text-Shadow - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">text-shadow</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b> 
    [<b><i class="fs">CSS2</i></b>] [<b><i class="fs">S1.2</i></b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Text Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="wordspace.htm">word-spacing</a><br>
        <a href="letterspace.htm">letter-spacing</a><br>
        <a href="whitespace.htm">white-space</a><br>
        <a href="wordwrap.htm">word-wrap</a><br>
        <a href="textalign.htm">text-align</a><br></td>
    <td valign=top><a href="textalignlast.htm">text-align-last</a><br>
        <a href="textdec.htm">text-decoration</a><br>
        <a href="texttrans.htm">text-transform</a><br>
        <a href="textindent.htm">text-indent</a><br>
        <a href="textunderpos.htm">text-underline-position</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">none</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left valign=top><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props">CSS2: Sect 16.3.2</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property defines one or more comma-separated shadow effects to be
        applied to the text content of the current element. Effects consist of
        a shadow color, a maximum blurring radius for the shadow effect and x/y
        offset of the shadow effect from the element content. Multiple effects
        are applied to the element in the order specified in the property.
        Effects can overlap each other, but they should never overlap the text content.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>] [<b><i class="fs">S1.2</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">none</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>] [<b><i class="fs">S1.2</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        No text-shadow is applied to the content.</dd>

<dt><b class="subheading">[shadow effects]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>] [<b><i class="fs">S1.2</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Specifies one or more comma-separated shadow effects for the
        current element. Effects are given as X/Y offsets along with optional
        shadow-color and blur-radius values [see syntax below for details.]
        <br>
        <b class="alert">[Shadow-color]</b>: This uses a color to create the shadow effect and may be
        placed at the beginning or end of the text-shadow effect syntax (see below.)
        If no color is specified, the value of the 'color' property is used.
        <br>
        <b class="alert">[Shadow-offset]</b>: This is given as a pair of length values indicating x-
        and y- distances to use as offset references from the original text content.
        The first value specifies the horizontal distance of the offset (positive
        values are to the right, negative values to the left.) The second value
        specifies the vertical distance of the offset (positive values are below,
        negative values are above.)
        <br>
        <b class="alert">[Blur-radius]</b>: A length value indicating the boundary 
        of the blurring for the current text-shadow effect.
</dd>
</dl>

<dl>
<dt><big><b class="mainheading">[Shadow Effects] Syntax</b></big>
    <dd><b class="selector">Property</b> { <span class="property">text-shadow</span>:<br>
        ([shadow-color] || [x-offset] [y-offset] [blur-radius]? ",")*
        ([shadow-color] || [x-offset] [y-offset] [blur-radius]?) }
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">blockquote</b> {
        <span class="property">text-shadow:</span> black 3px 3px, yellow -3px -3px }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">blockquote</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">text-shadow:</span> black 3px 3px 2px, yellow -3px
        -3px&quot;&gt;this<br>blockquote
        text has a shadow&lt;/<b class="tagname">blockquote</b>&gt;</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li><b class="alert">Note:</b> Reliance on the 'text-shadow' property to
        create opaque ghosting effects (where foreground color is the same as
        the background color) can create problems. In browsers that support
        CSS but not this particular property, it would have the effect of making
        the content invisible.
    <li>This property has been removed in CSS2.1.
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>